<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
           width:500px;
           height: 500px;
           margin:0 auto;
           border-collapse:collapse;
        }
        table tr{
            text-align: center;
        }
        .col1,.col3{
            width:200px;
        }
        .col2{
            width:100px;
            color:orange;
            font-size: 50px;
            font-weight: bold;
        }
        .choice{
            font-size:30px;
            color:orange;
            font-weight: bold;
        }
        #ready{
            font-size: 30px;
            color:red;
            font-weight: bold;
        }
    </style>
    <script>
        var total=0;
        var win=0;
        var lose=0;
        var draw=0;
        function $(id){
            return document.getElementById(id);
        }

        function select(obj){
            //select的DOM对象.value  获取选中项的值
            // var select=document.getElementById("select");
            // console.log(select.value);
           var selectValue=obj.value;//获取选中项的值
           if(selectValue==1){
                $("current").src="img/st.jpg";
           }else if(selectValue==2){
                $("current").src="img/jd.jpg";
           }else if(selectValue==3){
                $("current").src="img/bu.jpg";
           }else{
                $("current").src="img/zb.jpg";
           }
        }
        function start(){
            total++;
            //你出拳
            // 获取当前下拉列表选中项的value值
            var selectValue=$("select").value;
            if(selectValue==1){
                $("you").src="img/st.jpg";
           }else if(selectValue==2){
                $("you").src="img/jd.jpg";
           }else if(selectValue==3){
                $("you").src="img/bu.jpg";
           }else{
                $("you").src="img/zb.jpg";
           }
           //电脑出拳 [1,3]    
           var x=parseInt(Math.random()*3+1);//[1,4)
           if(x==1){
                $("computer").src="img/st.jpg";
           }else if(x==2){
                $("computer").src="img/jd.jpg";
           }else if(x==3){
                $("computer").src="img/bu.jpg";
           }

           //判断输赢
           var minus=selectValue-x;
           if(minus==0){
                draw++;
                $("ready").innerHTML="平局";
           }else if(minus==-1 || minus==2){
                win++;
                $("ready").innerHTML="你赢了";
           }else{
                lose++;
                $("ready").innerHTML="你输了";
           }

           $("total").innerHTML=total;
           $("win").innerHTML=win;
           $("lose").innerHTML=lose;
           $("draw").innerHTML=draw;




        }


    </script>
</head>
<body>
    <table border="1">
        <tbody>
            <tr>
                <td class="col1">
                    <p>你</p>
                    <img src="img/zb.jpg" id="you">
                </td>
                <td  class="col2">VS</td>
                <td  class="col3">
                    <p>电脑</p>
                    <img src="img/zb.jpg" id="computer">
                </td>
            </tr>
            <tr>
                <td colspan="3" id="ready">Are you ready?</td>
                <!-- <td></td>
                <td></td> -->
            </tr>
            <tr>
                <td>
                    <p>你选择了</p>
                    <img src="img/zb.jpg" id="current">
                </td>
                <td class="choice">Choice</td>
                <td>
                    <p>请选择出拳</p>
                    <select  id="select" onchange="select(this)">
                        <option value="0">请出拳</option>
                        <option value="1">石头</option>
                        <option value="2">剪刀</option>
                        <option value="3">布</option>
                    </select>
                    <input type="button" value="确认出拳" onclick="start()">
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    总数<span id="total">0</span>
                    胜利<span id="win">0</span>
                    失败<span id="lose">0</span>
                    平局 <span id="draw">0</span>
                </td>
                <!-- <td></td>
                <td></td> -->
            </tr>
        </tbody>
    </table>
</body>
</html>